<template>
  <!-- 卡片组件 -->
  <el-card>
    <!-- 标签页组件 -->
    <el-tabs>
      <!-- 第一个标签页: 检查项目列表 -->
      <el-tab-pane label="检查项目列表">
        <!-- 查询表单 -->
        <el-form ref="queryParams" :model="queryParams" :inline="true" label-width="68px">
          <!-- 项目名称输入框 -->
          <el-form-item label="项目名称" prop="checkItemName">
            <el-input
                v-model="queryParams.checkItemName"
                placeholder="请输入项目名称"
                clearable
                size="small"                style="width:240px"/>
          </el-form-item>
          <!-- 患者名称输入框 -->
          <el-form-item label="患者名称" prop="patientName">
            <el-input
                v-model="queryParams.patientName"
                placeholder="请输入患者名称"
                clearable
                size="small"                style="width:240px"/>
          </el-form-item>
          <!-- 交易时间选择器 -->
          <el-form-item label="交易时间">
            <el-date-picker
                v-model="queryParams.dateRange"
                size="small"                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </el-form-item>
          <!-- 搜索和重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table
            :data="tableData"
            border
            show-summary            style="width: 100%"
            @selection-change="selectionChange"
            :summary-method="getSummaries">
          <!-- 检查项目ID列 -->
          <el-table-column
              prop="checkItemId"
              label="检查项目ID"
              align="center">
          </el-table-column>
          <!-- 检查项目名称列 -->
          <el-table-column
              prop="checkItemName"
              align="center"
              label="检查项目名称">
          </el-table-column>
          <!-- 项目价格列 -->
          <el-table-column
              prop="price"
              sortable
              align="center"
              label="项目价格">
          </el-table-column>
          <!-- 患者名称列 -->
          <el-table-column
              prop="patientName"
              align="center"
              label="患者名称">
          </el-table-column>
          <!-- 检查状态列 -->
          <el-table-column
              prop="resultStatus"
              align="center"
              label="检查状态"
              :formatter="resultFormatter">
          </el-table-column>
          <!-- 创建时间列 -->
          <el-table-column
              prop="createTime"
              align="center"
              label="创建时间">
          </el-table-column>
          <!-- 创建人列 -->
          <el-table-column
              prop="createBy"
              align="center"
              label="创建人">
          </el-table-column>
        </el-table>
        <!-- 分页控件 -->
        <el-pagination
            :current="queryParams.pageNum"
            :page-sizes="[5, 10, 20, 30]"
            :pageSize="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </el-tab-pane>
      <!-- 第二个标签页: 检查项目统计列表 -->
      <el-tab-pane label="检查项目统计列表">
        <!-- 查询表单 -->
        <el-form ref="queryParamsTwo" :model="queryParamsTwo" :inline="true" label-width="68px">
          <!-- 项目名称输入框 -->
          <el-form-item label="项目名称" prop="itemName">
            <el-input
                v-model="queryParamsTwo.itemName"
                placeholder="请输入项目名称"
                clearable
                size="small"                style="width:240px"/>
          </el-form-item>
          <!-- 交易时间选择器 -->
          <el-form-item label="交易时间">
            <el-date-picker
                v-model="queryParamsTwo.dateRange"
                size="small"                style="width:240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </el-form-item>
          <!-- 搜索和重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryTwo">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQueryTwo">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table
            :data="tableDataTwo"
            border
            show-summary            style="width: 100%"
            @selection-change="selectionChangeTwo">
          <!-- 检查项目ID列 -->
          <el-table-column
              prop="itemRefId"
              label="检查项目ID"
              align="center">
          </el-table-column>
          <!-- 检查项目名称列 -->
          <el-table-column
              prop="itemName"
              align="center"
              label="检查项目名称">
          </el-table-column>
          <!-- 总金额列 -->
          <el-table-column
              prop="amount"
              sortable
              align="center"
              label="总金额">
          </el-table-column>
          <!-- 检查次数列 -->
          <el-table-column
              prop="price"
              sortable
              align="center"
              label="检查次数">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      // 第二个标签页的数据
      tableDataTwo: [],
      // 第一个标签页的数据
      tableData: [],
      // 第一个标签页的查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 第二个标签页的查询参数
      queryParamsTwo: {},
      // 检查状态选项
      resultOptions: [],
    };
  },
  created() {
    this.loadCheck();
    this.loadResult();
    this.loadCheckOrder();
  },
  methods: {
    // 格式化检查状态
    resultFormatter(row) {
      let resultStatusName = "未知";
      this.resultOptions.filter(item => {
        if (row.resultStatus === item.dictValue) {
          resultStatusName = item.dictLabel;
        }
      });
      return resultStatusName;
    },
    // 加载检查状态选项
    loadResult() {
      this.$http.get("/statistics/dict/data/type/his_check_result_status").then(resp => {
        this.resultOptions = resp.data.data;
      });
    },
    // 加载第一页数据
    loadCheck() {
      this.$http.post("/statistics/checkResult/listPage", this.queryParams).then(resp => {
        this.tableData = resp.data.data.records;
        this.queryParams.total = resp.data.data.total;
      });
    },
    // 加载第二页统计数据
    loadCheckOrder() {
      this.$http.post("/statistics/careOrderItem/listById", this.queryParamsTwo).then(resp => {
        this.tableDataTwo = resp.data.data;
        this.queryParamsTwo.total = resp.data.data.total;
      });
    },
    // 页码和每页大小变化处理
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.loadCheck();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.loadCheck();
    },
    // 第一页查询重置
    resetQuery() {
      this.queryParams = { pageNum: 1, pageSize: 10 };
      this.loadCheck();
    },
    handleQuery() {
      this.loadCheck();
    },
    // 第二页查询重置
    resetQueryTwo() {
      this.queryParamsTwo = {};
      this.loadCheckOrder();
    },
    handleQueryTwo() {
      this.loadCheckOrder();
    },
    // 处理第一页的选择变化
    selectionChange(val) {
      this.selectedRows = val;
    },
    // 处理第二页的选择变化
    selectionChangeTwo(val) {
      this.selectedRows = val;
    },
    // 表格汇总方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property === 'price') {
          sums[index] = values.reduce((prev, curr) => {
            const value = isNaN(curr) ? 0 : curr;
            return prev + value;
          }, 0);
          sums[index] += ' ';
        } else {
          sums[index] = '';
        }
      });
      return sums;
    }
  }
}
</script>
